<!--  -->
<template>
  <!-- <el-input v-model="dataForm[scriptItem.text]"
            :counter="scriptItem.counter"
            :rules="scriptItem.rules"
            :label="scriptItem.label"
            persistent-hint
            :placeholder="scriptItem.hint"
            required></el-input> -->
  <!-- <el-checkbox v-model="dataForm[scriptItem.text]"
               style="fontWeight:bold;">{{ scriptItem.content }}</el-checkbox> -->
               <div class="label_multiple">
    <div class="label_multiple_header" slot="label">
      <!-- <span>{{ scriptItem.content }}</span> -->
      <el-switch
      v-model="switchValue"
      active-color="#138DC7"
      inactive-color="#BFBFBF"></el-switch>
    </div>
    <div class="content_box">
      <div class="lable_content">{{ scriptItem.content}}</div>
      <el-checkbox v-if="scriptItem.text==='teamsChat'"
                   v-model="dataForm[scriptItem.hideMsgFooter]">Hide the message footer</el-checkbox>
      <el-checkbox v-if="scriptItem.text==='email'"
                   v-model="dataForm[scriptItem.hideEmailMsgFooter]">Hide the message footer</el-checkbox>
    </div>
    <div v-if="dataForm[scriptItem.text]">
      <div v-for="(item,i) in scriptItem.contentType" :key="i" class="item_template">
      <!-- <template v-slot:layouts>
        <slot name="layouts"></slot>
      </template> -->
      <!-- <TypeSendMessage v-if="item.type ==='send-message'"
                        :dataForm='dataForm'
                        :scriptItem='item'>
      </TypeSendMessage> -->
      <TypeSendMessageBcc v-if="item.type ==='send-message'"
                        :dataForm='dataForm'
                        :scriptItem='item'>
      </TypeSendMessageBcc>
      <TypeSendMessageCascader v-if="item.type ==='send-message-cascader'"
                        :dataForm='dataForm'
                        :scriptItem='item'>
      </TypeSendMessageCascader>
      <TypeTemplate v-if="item.type ==='select-template'"
                    :dataForm='dataForm'
                     @hiddenSettingModel="hiddenSettingModels"
                    :blockInfo='blockInfo'
                    :labelInfo="scriptItem.label"
                    :scriptItem='item'></TypeTemplate>
      <TypeSelectUserColumn v-if="item.type === 'select-user-column'"
                              :dataForm='dataForm'
                               @hiddenSettingModel="hiddenSettingModels"
                              :scriptItem='item' />
      <TypeSelectTree v-if="item.type ==='select-tree'"
                      :dataForm='dataForm'
                      :scriptItem='item'>
      </TypeSelectTree>
      <TypeSelectMultiple v-if="item.type ==='select-multiple'"
                        :dataForm='dataForm'
                        :scriptItem='item'>
      </TypeSelectMultiple>
      <TypeCardJson v-if="item.type === 'type-card-json'"
      @hiddenSettingModel="hiddenSettingModels"
                  :labelInfo="scriptItem.label"
                  :dataForm='dataForm'
                  :scriptItem='item' />
      <TypeText v-if="item.type === 'text'"
          :dataForm='dataForm'
          :scriptItem='item' />
      <TypeTextareaEditor v-if="item.type === 'textarea-editor'"
              :blockInfo='blockInfo'
              :dataForm='dataForm'
              :scriptItem='item' />
    </div>
    </div>
  </div>

</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import TypeTemplate from './type-select-template'
import TypeSendMessage from './type-send-message'
import TypeSelectTree from './type-select-tree'
import TypeText from './type-text'
import TypeSelectUserColumn from './type-select-user-column'
import TypeSendMessageBcc from './type-send-message-bcc'
import TypeCardJson from './type-card/type-card-teams-basic'
import TypeSelectMultiple from './type-select-multiple'
import TypeTextareaEditor from './type-textarea-editor'
import TypeSendMessageCascader from './type-send-message-cascader'
export default {
  props: {
    blockInfo: {
      type: Object,
      default: () => {
      }
    },
    scriptItem: {
      type: Object,
      default: () => { }
    }
  },
  mixins: [mixinTypeViewModule],
  components: { TypeTemplate, TypeSendMessage, TypeSelectTree, TypeSelectUserColumn, TypeText, TypeSendMessageBcc, TypeCardJson,TypeSelectMultiple,TypeTextareaEditor,TypeSendMessageCascader },
  methods: {
    hiddenSettingModels () {
      this.$emit('hiddenSettingModel')
    }
  },
  computed:{
    switchValue:{
      get(){
        return !!this.dataForm[this.scriptItem.text]
      },
      set(val){
        this.dataForm[this.scriptItem.text] = !!val
      }
    }
  }
}
</script>

<style lang="scss">
.label_multiple{
  .label_multiple_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    right: 0px;
    top: -28px;
    .lable_content{
      margin-bottom: 10px;
    }
  }
  .content_box {
      .lable_content {
        width: 355px;
        font-size: 14px;
        font-weight: 400;
        color: #7f7f7f;
        line-height: 20px;
      }
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .item_template{
    >.area-send-message:nth-child(1){
      box-shadow: 0px -1px 0px 0px #F0F0F0;
    }
    >.type-select-user-column:nth-child(1){
      box-shadow: 0px -1px 0px 0px #F0F0F0,0px 1px 0px 0px #F0F0F0;
      }
    // box-shadow: 0px 1px 0px 0px #F0F0F0;
    // margin-bottom: 10px;
    >div:nth-child(1){
      // box-shadow: 0px -1px 0px 0px #F0F0F0,0px 1px 0px 0px #F0F0F0;
      box-shadow: 0px 1px 0px 0px #F0F0F0;
      margin-bottom: 10px;
    }
  }
}
</style>
